<script setup lang="ts">
import {ref} from 'vue';
import {ElMessage} from "element-plus";
import {updateRespondent, changePhone} from "@/axios/respondent/respondentReq";
import Respondent from "@/types/response/respondent";
import useRespondentStore from '@/stores/respondent';

const respondentStore = useRespondentStore();
const defaultFormData = {
	oldPhone: '',
	newPhone: '',
	checkCode: '',
}
const formData = ref({...defaultFormData})
const validatePhone = (rule, value, callback) => {
	if (!value) {
		callback(new Error('请输入手机号'));
	}
	if (!/^1[34578]\d{9}$/.test(value)) {
		callback(new Error('请输入正确的手机号'));
	}
	callback();
}

const rules = {
	oldPhone: [{validator: validatePhone, trigger: 'blur'}],
	newPhone: [{validator: validatePhone, trigger: 'blur'}],
	checkCode: [{required: true, message: '请输入验证码', trigger: 'blur'}]
}
const formRef = ref()
//获取验证码
const getCheckCode = () => {
}
//修改密码
const changePassword = () => {
	formRef.value.validate((valid) => {
		if (valid) {
			const respondent = new Respondent();
			respondent.respondentId = respondentStore.id;
			respondent.phoneNum = formData.value.newPhone;

			changePhone(respondent)
			ElMessage.success('修改成功')
			Object.assign(formData.value, defaultFormData)
			formRef.value.clearValidate()

		}
	})

}
</script>

<template>
	<el-form ref="formRef" :rules="rules" :size="'small'" style="max-width: 300px;" :model="formData" label-width="auto"
			 hide-required-asterisk>
		<el-form-item label="原手机号:" prop="oldPhone">
			<el-input v-model="formData.oldPhone"/>
		</el-form-item>
		<el-form-item label="新手机号:" prop="newPhone">
			<el-input v-model="formData.newPhone"/>
		</el-form-item>
		<el-form-item label="验证码:" prop="checkCode">
			<el-input v-model="formData.checkCode" style="width: 140px;"></el-input>
			<el-button style="width: 80px; margin-left: 6px;" type="primary" @click="getCheckCode">获取验证码
			</el-button>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="changePassword">提交</el-button>
		</el-form-item>
	</el-form>

</template>

<style scoped lang="css">

</style>